import { useState, useRef } from "react";
import styles from "./index.less";
import { Button } from "antd";
import {
    motion,
    useAnimationControls,
    useAnimate,
    useAnimationFrame,
    useTime,
    useTransform,
    useMotionValue,
} from "motion/react";

export default () => {
    const ref = useRef<HTMLDivElement>(null);
    const control = useAnimationControls();
    const [scope, animate] = useAnimate();

    const [animationFrameOpen, setAnimationFrameOpen] = useState<boolean>(false);
    const [rotateY, setRotateY] = useState<number>(0);

    const count = useMotionValue(0);
    const rounded = useTransform(count, latest => Math.round(latest));

    useAnimationFrame((time, delta) => {
        if (animationFrameOpen) {
            setRotateY((time / 10) % 360);
        }
    });

    const time = useTime();
    const rotate = useTransform(time, [0, 3600], [0, 360], { clamp: false });

    return (
        <div className={styles.container}>
            <div className={styles.card}>
                <p>useAnimationControls(有侵入)</p>

                <Button
                    onClick={async () => {
                        await control.start({ translateX: -65, translateY: -65, scale: 0.5, backgroundColor: '#FF3030', transition: { duration: 0.2, ease: 'backOut' } });
                        await control.start({ translateX: 65, backgroundColor: '#32CD32', transition: { duration: 0.2, ease: 'backOut', delay: 0.05, } });
                        await new Promise(resolve => setTimeout(resolve, 50));
                        await control.start({ translateY: 65, backgroundColor: '#FF8C00', transition: { duration: 0.2, ease: 'backOut' } });
                        await new Promise(resolve => setTimeout(resolve, 50));
                        await control.start({ translateX: -65, backgroundColor: '#1E90FF', transition: { duration: 0.2, ease: 'backOut' } });
                        await new Promise(resolve => setTimeout(resolve, 50));
                        await control.start({ translateX: 0, translateY: 0, rotate: 720, scale: 0.3, transition: { duration: 1.5 } });
                        await new Promise(resolve => setTimeout(resolve, 50));
                        await control.start({ scale: 1, backgroundColor: '#ff6919', transition: { duration: 0.2, ease: 'backOut' } });
                        await control.start({ rotate: 0, transition: { duration: 0 } });
                    }}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                    animate={control}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>useAnimate(无侵入)</p>

                <Button
                    onClick={async () => {
                        await animate(scope.current, { rotate: 45, scale: 1.3 }, { duration: 0.4, ease: 'backOut' });
                        await new Promise(resolve => setTimeout(resolve, 50));
                        await animate(scope.current, { rotate: -45, scale: 0.75 }, { duration: 0.4, ease: 'backOut' });
                        await new Promise(resolve => setTimeout(resolve, 50));
                        await animate(scope.current, { rotate: 0, scale: 1.5 }, { duration: 0.2, ease: 'backOut' });
                        await animate(scope.current, { rotate: 0, scale: 1, backgroundColor: '#3a51ff' }, { duration: 1.5, ease: 'linear' });
                        await animate(scope.current, { backgroundColor: '#ff6919' });
                    }}
                >开始动画</Button>

                <div
                    ref={scope}
                    className={styles.motionView}
                >
                    M
                </div>
            </div>

            <div className={styles.card}>
                <p>useAnimationFrame(慎用)</p>

                <Button
                    onClick={async () => {
                        setAnimationFrameOpen(!animationFrameOpen);
                    }}
                >开始动画</Button>

                <div
                    ref={ref}
                    className={styles.motionView}
                    style={{ transform: `rotateY(${rotateY}deg)` }}
                >
                    M
                </div>
            </div>

            <div className={styles.card}>
                <p>useDragControls(不能和AF共存)</p>

                <Button
                    onClick={async () => {
                        openTab('dragControl');
                    }}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>useInView(组件封装)</p>

                <Button
                    onClick={async () => {
                        openTab('manualControl');
                    }}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>useScroll(滚动事件)</p>

                <Button
                    onClick={async () => {
                        openTab('scrollAnimation');
                    }}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>useTime/useTransform</p>

                <Button
                    onClick={async () => {}}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                    style={{ rotate }}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>useMotionValue(数值变化)</p>

                <Button
                    onClick={async () => {
                        const controls = animate(count, 10000, { duration: 1000 })
                        // controls.stop();
                    }}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                >
                    {rounded}
                </motion.div>
            </div>
        </div>
    );
};
